<template>
  <div id="register">
    <el-container>
      <el-header height="100px">
        <div class="container flexbox">
          <div class="logo">
             <router-link to="/"><img src="./assets/zgs_log.png" width="100%"></router-link>
          </div>
          <div class="nav">
            <el-breadcrumb separator="|">
              <el-breadcrumb-item>说明</el-breadcrumb-item>
               <el-breadcrumb-item><router-link to="/login">登录</router-link></el-breadcrumb-item>
            </el-breadcrumb>
          </div>
        </div>
      </el-header>
      <el-main :style="backgroundDiv">
        <el-row :gutter="20" style="margin:50px 50px;height:80%;">
          <el-col :span="24">
            <div class="myform">
                <div class="login_header">
                  <i class="el-icon-service"></i>
                  <span>考生注册 / USER REGISTER</span>
                </div>
                <div class="login_form">
                  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="70px" class="demo-ruleForm">
                    <el-form-item label="邮箱" prop="account">
                      <el-input v-model="ruleForm.account" placeholder="请输入邮箱"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                      <el-input v-model="ruleForm.password" placeholder="请输入密码" type="password"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号" prop="mobile">
                      <el-input v-model="ruleForm.mobile" placeholder="请输入手机号"></el-input>
                    </el-form-item>
                    <el-form-item label="验证码">
                      <el-input v-model="ruleForm.code" placeholder="请输入验证码" style="width:63%;"></el-input>
                      <el-button style="padding:12px 0px;width:95px">
                        <span v-show="show" @click="send">获取验证码</span>
                        <span v-show="!show" class="count">{{count}}s后重发</span>
                      </el-button>
                    </el-form-item>
                    <el-form-item>
                      <!-- <el-button type="primary">发送验证码</el-button> -->
                      <el-button type="primary" style="width:100%;" @click="handleRegister" v-loading.fullscreen.lock="fullscreenLoading"
              element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.2)">注册</el-button>
                    </el-form-item>
                  </el-form>
                </div>
            </div>
          </el-col>
        </el-row>
        <footer>@copyright</footer>
      </el-main>
      <!--  <el-footer>@copyright</el-footer> -->
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    var checkMobile = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入手机号'));
      } else {
          var re = /^1\d{10}$/
          if (!re.test(value)) {
            callback(new Error('请输入正确的手机号'));
          } else {
              callback();
            }
        }
    };
    return {
      //倒计时
      show: true,
      count: '',
      timer: null,
      ruleForm: {
          account: '',
          password:'',
          mobile:'',
          code:''
        },
      rules:{
        account: [
            { required: true, message: '请输入正确邮箱', trigger: 'blur',type:"email"},
            // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
        mobile: [
            { validator: checkMobile, trigger: 'blur' },
            
          ],
        password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
          ]
      },
      fullscreenLoading:false,
      backgroundDiv: {
          backgroundImage: 'url(' + require('./assets/1.jpeg') + ')',
          backgroundSize:'cover'
      }
    }
  },
  mounted(){
    this.getInfo();
  },
  methods:{
    send(){
      var that=this;
      this.$refs.ruleForm.validate((vaild)=>{
        if(vaild){
          var message={
            mobile:this.ruleForm.mobile
          }
          console.log(message);
          this.fullscreenLoading=true;
          this.axios({
            url:this.host+'/3v1t.smserver.cn/index.php/index/login/get_code',
            method:'post',
            data:JSON.stringify(message),
            headers:{
              "Content-type":"application/json"
            }
          }).then((res)=>{
            if(res.data.code==1){  
                that.fullscreenLoading=false;
                that.getCode();
                 that.$message({
                  message:''+res.data.msg,
                  type:'success'
                })
            }else{
              that.fullscreenLoading=false;
                 that.$message({
                  message:''+res.data.msg,
                  type:'warning'
                })
            }
            //console.log(res);
            // if(res.data.code==1){
            //   that.$router.push('/userHome')
            // }else{
            //   that.$message({
            //     message:'用户名或密码错误',
            //     type:'warning'
            //   })
            // }
          })
        }else{
          console.log('检查格式！')
          return false;
        }
      })
    },
    handleRegister(){
      var that=this;
      this.$refs.ruleForm.validate((vaild)=>{
        if(vaild){
          if(this.ruleForm.code==""){
            this.$message({
              type:'warning',
              message:'请输入验证码！'
            })
          }else{
            var message={
              account:this.ruleForm.account,
              code:this.ruleForm.code,
              mobile:this.ruleForm.mobile,
              password:this.ruleForm.password
            }
            console.log(message);
            this.fullscreenLoading=true;
            this.axios({
              url:this.host+'/3v1t.smserver.cn/index.php/index/login/register',
              method:'post',
              data:JSON.stringify(message),
              headers:{
                "Content-type":"application/json"
              }
            }).then((res)=>{
              //console.log(res);
              that.fullscreenLoading=false;
              if(res.data.code==1){
                that.$message({
                  message:'注册成功',
                  type:'success'
                })
                setTimeout(()=>{
                  that.$router.push('/')
                },1500)
              }else{
                that.$message({
                  message:'验证码错误',
                  type:'warning'
                })
              }
            })
          }
        }else{
          console.log('检查格式！')
          return false;
        }
      })
    },
    //倒计时
    getCode(){
     const TIME_COUNT = 60;
     if (!this.timer) {
       this.count = TIME_COUNT;
       this.show = false;
       this.timer = setInterval(() => {
       if (this.count > 0 && this.count <= TIME_COUNT) {
         this.count--;
        } else {
         this.show = true;
         clearInterval(this.timer);
         this.timer = null;
        }
       }, 1000)
      }
    },
    getInfo(){
        var that=this;
        that.fullscreenLoading=true;
        this.axios({
          url:this.host+'/3v1t.smserver.cn/index.php/index/login/index',
          method:'get'
        }).then((res)=>{
          console.log(res);
          that.fullscreenLoading=false;
          that.attention=res.data.content;
          that.backgroundDiv.backgroundImage='url('+res.data.thumb+')' 
        })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
#register{
  height:100%;
  .el-container{
    height:100%;
    background:#393D49;
  }
  .container{
    width:100%;
    margin:0 auto;
    
  }
  header{
      height:100px;
      background:#393D49;
      display:flex;
      align-items: center;
      border-bottom: 1px solid rgba(255,255,255,0.3);
      .flexbox{
        display:flex;
        align-items: center;
        justify-content: space-between;
      }
  }
    footer{
    height:60px;
    text-align:center;
    line-height:60px;
    color:#fff;
    font-size:14px;
    border-top:1px solid rgba(255,255,255,0.3);
    
 }
  .logo{
    width:500px;
  }
  .nav a,.nav span{
    color:#fff;
    cursor: pointer;
    text-decoration:none;
  }
  .content{
   
  }
  .myform{
    width:400px;
    background:#fff; 
    margin: 0 auto;
   }

   .login_header{
    height: 50px;
    padding-left: 20px;
    line-height: 50px;
    border-bottom: 1px solid #ddd;
    color: #1E9FFF;
    text-align: left;
    font-size: 14px;
   }

   .login_form{
      padding:35px 0;
      width:85%;
      margin:0 auto;
   }
  .el-main{
    padding:0;
    //overflow:hidden;
  }
  .el-form-item__label{
    width:65px;
    text-align:center;
    padding-right:0;
  }
  .el-form-item__content{
    text-align:left;
  }
}
</style>
